<template>
    <div class="titlebox">
        <div class="indent">
            <i class="iconfont icon-yejipaiming"></i>
            订单
        </div>
        <div class="btngroup">
            <a @click="dateW">周</a>
            <a @click="dateM">月</a>
            <a @click="dateY">年</a>
        </div>
    </div>
    <div ref="target" class="container">
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import echarts from "echarts"
var data = ref([])
var dataM = ref([
    { timeStr: "2022-02-1", income: "55.5", expense: "16.1" },
    { timeStr: "2022-02-2", income: "35.5", expense: "26.1" },
    { timeStr: "2022-02-3", income: "46.5", expense: "23.1" },
    { timeStr: "2022-02-4", income: "37.5", expense: "5.1" },
    { timeStr: "2022-02-5", income: "51.5", expense: "9.1" },
    { timeStr: "2022-02-6", income: "32.5", expense: "1.1" },
    { timeStr: "2022-02-7", income: "49.5", expense: "37.1" },
    { timeStr: "2022-02-8", income: "12.5", expense: "31.1" },
    { timeStr: "2022-02-9", income: "63.5", expense: "32.1" },
    { timeStr: "2022-02-10", income: "23.5", expense: "72.1" },
    { timeStr: "2022-02-11", income: "23.5", expense: "72.1" },
    { timeStr: "2022-02-12", income: "55.5", expense: "26.1" },
    { timeStr: "2022-02-13", income: "46.5", expense: "23.1" },
    { timeStr: "2022-02-14", income: "37.5", expense: "5.1" },
    { timeStr: "2022-02-15", income: "51.5", expense: "9.1" },
    { timeStr: "2022-02-16", income: "32.5", expense: "1.1" },
    { timeStr: "2022-02-17", income: "49.5", expense: "77.1" },
    { timeStr: "2022-02-18", income: "52.5", expense: "51.1" },
    { timeStr: "2022-02-19", income: "63.5", expense: "52.1" },
    { timeStr: "2022-02-20", income: "31.5", expense: "51.1" },
    { timeStr: "2022-02-21", income: "63.5", expense: "74.1" },
    { timeStr: "2022-02-22", income: "66.5", expense: "76.1" },
    { timeStr: "2022-02-23", income: "74.5", expense: "7.1" },
    { timeStr: "2022-02-24", income: "41.5", expense: "3.1" },
    { timeStr: "2022-02-25", income: "32.5", expense: "2.1" },
    { timeStr: "2022-02-26", income: "33.5", expense: "57.1" },
    { timeStr: "2022-02-27", income: "21.5", expense: "54.1" },
    { timeStr: "2022-02-28", income: "12.5", expense: "52.1" },
    { timeStr: "2022-02-29", income: "62.5", expense: "59.1" },
    { timeStr: "2022-02-30", income: "41.5", expense: "53.1" },
]);

var dataY = ref([
    { timeStr: "一月", income: "23.5", expense: "72.1" },
    { timeStr: "二月", income: "55.5", expense: "26.1" },
    { timeStr: "三月", income: "46.5", expense: "23.1" },
    { timeStr: "四月", income: "37.5", expense: "5.1" },
    { timeStr: "五月", income: "51.5", expense: "9.1" },
    { timeStr: "六月", income: "32.5", expense: "1.1" },
    { timeStr: "七月", income: "49.5", expense: "77.1" },
    { timeStr: "八月", income: "52.5", expense: "51.1" },
    { timeStr: "九月", income: "63.5", expense: "52.1" },
    { timeStr: "十月", income: "31.5", expense: "51.1" },
    { timeStr: "十一月", income: "63.5", expense: "74.1" },
    { timeStr: "十二月", income: "66.5", expense: "76.1" },
]);
var dataW = ref([
    { timeStr: "星期一", income: "23.5", expense: "72.1" },
    { timeStr: "星期二", income: "55.5", expense: "26.1" },
    { timeStr: "星期三", income: "46.5", expense: "23.1" },
    { timeStr: "星期四", income: "37.5", expense: "5.1" },
    { timeStr: "星期五", income: "51.5", expense: "9.1" },
    { timeStr: "星期六", income: "32.5", expense: "1.1" },
    { timeStr: "星期日", income: "49.5", expense: "77.1" },
]);
const target = ref(null)
// 年月周切换


const dateW = (e) => {
    data.value = dataW.value
    mChart = echarts.init(target.value, "light")
    renderChart()
    const btns = document.querySelectorAll("a")
    btns[0].style.color = "#0061ce";
    btns[1].style.color = "";
    btns[2].style.color = "";
}
const dateM = (e) => {
    data.value = dataM.value
    mChart = echarts.init(target.value, "light")
    renderChart()
    const btns = document.querySelectorAll("a")
    btns[1].style.color = "#0061ce";
    btns[2].style.color = "";
    btns[0].style.color = "";
}
const dateY = (e) => {
    data.value = dataY.value;
    mChart = echarts.init(target.value, "light")
    renderChart()
    const btns = document.querySelectorAll("a")
    btns[2].style.color = "#0061ce";
    btns[1].style.color = "";
    btns[0].style.color = "";
}

let mChart
onMounted(() => {
    data.value = dataM.value
    mChart = echarts.init(target.value, "light")
    renderChart();

})
const renderChart = () => {
    var option = {
        title: {
            text: "销售信息",
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "blue"
                }
            }
        },
        legend: {
            data: ['订单金额', "订单数"],


        },
        xAxis: {
            data: data.value.map((item) => item.timeStr),
            axisLabel: {
                interval: 0,//横轴信息全部显示
                rotate: -30,//-15度角倾斜显示
            },
        },
        yAxis: {

        },
        series: [
            {
                name: '订单金额',
                type: 'bar',
                barWidth: 30,
                data: data.value.map((item) => item.income),
                color: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0,
                    0,
                    0,
                    1,
                    [
                        { offset: 0, color: "#00fffb" }, // 0 起始颜色
                        { offset: 1, color: "#0061ce" } // 1 结束颜色
                    ]
                ),

            },
            {
                name: '订单数',
                type: 'line',
                color: '#6EC6D0',
                // smooth: true,//平滑
                data: data.value.map((item) => item.expense),
            },

        ],

    }
    mChart.setOption(option);
}
</script>

<style lang="scss" scoped>
.container {
    height: 400px;
    padding-top: 20px;
    ;
}

.titlebox {
    display: flex;
    justify-content: space-between;
    padding: 12px 8px;
    border-bottom: 1px solid #f0eaea;
}

.btngroup {
    display: flex;

    a {
        list-style: none;
        padding: 0 10px;
        // color: red;
        margin: 0 3px;
    }
}
</style>